<template>
  <div class="main_box">
    <!-- <router-link to="/ManageCockpit/details"><el-button>details</el-button></router-link> -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple"/>
        <div class="main_box_son">
          <div class="main_conent">
            <div class="title">今日报送总量</div>
            <div class="divheight10"/>
            <div id="total_submit" :style="{width: '100%', height: '300px'}"/>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple"/>
        <div class="main_box_son">
          <div class="main_conent">
            <div class="title">人员报送情况</div>
            <div class="divheight10"/>
            <div id="total_person" :style="{width: '100%', height: '300px'}"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="main_box_son">
      <div class="main_conent">
        <div class="title" style="display: flex; justify-content: space-between;">
          <span>报送进度</span>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-date-picker
                v-model="formInline.startDate"
                type="date"
                placeholder="选择日期"/>
              <span style="padding: 0 5px">—</span>
              <el-date-picker
                v-model="formInline.endDate"
                type="date"
                placeholder="选择日期"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="divheight10"/>
      </div>
      <el-row :gutter="19">
        <el-col :span="8">
          <Gague :gaugedata="gaugedata_submit"/>
        </el-col>
        <el-col :span="18" class="submit_situation">
          <div>
            <div id="submit_01" style="width:200px; height:150px;"/>
            <div class="word_btm">审核情况</div>
          </div>
          <div>
            <div id="submit_02" style="width:200px; height:150px;"/>
            <div class="word_btm">生成情况</div>
          </div>
          <div>
            <div id="submit_03" style="width:200px; height:150px;"/>
            <div class="word_btm">异常情况</div>
          </div>
          <div>
            <div id="submit_04" style="width:200px; height:150px;"/>
            <div class="word_btm">手工干预情况</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="19">
        <el-col :span="8">
          <Gague :gaugedata="gaugedata_person"/>
        </el-col>
        <el-col :span="18" class="submit_situation">
          <div>
            <div id="person_01" style="width:200px; height:150px;"/>
            <div class="word_btm">审核情况</div>
          </div>
          <div>
            <div id="person_02" style="width:200px; height:150px;"/>
            <div class="word_btm">生成情况</div>
          </div>
          <div>
            <div id="person_03" style="width:200px; height:150px;"/>
            <div class="word_btm">异常情况</div>
          </div>
          <div>
            <div id="person_04" style="width:200px; height:150px;"/>
            <div class="word_btm">手工干预情况</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="main_box_son">
      <div class="main_conent">
        <div class="title" style="display: flex; justify-content: space-between; padding-bottom:8px;">
          <span>报表情况</span>
          <div style="display: flex">
            <!-- <el-input v-model="search1" placeholder="请输入内容" @input="serchChange"/> -->
            <el-select v-model="selectVal" placeholder="请选择报表类型进行筛选" @change="getSelectVal()" >
              <el-option
                v-for="item in selctOptions"
                :key = "item.value"
                :label="item.label"
                :value = "item.value"
              />

            </el-select>
            <div class="gjsx" style="width:130px; color: #1A8FFE" @click="showText = !showText">
              高级筛选
              <span :class="showText?'el-icon-arrow-up rotate':'el-icon-arrow-up rotate1'"/>
            </div>
          </div>
        </div>
        <div class="divheight10"/>
        <div class="audit_first">
          <!-- <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="6">
              <div class="grid-content bg-purple displayib"/>
            </el-col> -->

          <!-- <el-col :span="3"/> -->
          <!-- <el-col :span="1.5">
              <el-button type="primary" class="width100">审核驳回</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" class="width100">审核通过</el-button>
            </el-col> -->
          <!-- </el-row> -->
          <el-collapse-transition>
            <div v-show="showText" class="bgg transition-box">
              <el-row :gutter="100" type="flex" justify="space-between">
                <el-col :span="12">
                  <div class="grid-content bg-purple-light textalign">
                    <template>
                      <span class="wn1">报表依据</span>
                      <el-select
                        :clearable="flag"
                        v-model="search2"
                        class="claswithwn"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple textalign">
                    <template>
                      <span class="wn1">报表类型</span>
                      <el-select
                        :clearable="flag"
                        v-model="search3"
                        class="claswithwn"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="100" type="flex" justify="space-between">
                <el-col :span="12">
                  <div class="grid-content bg-purple-light textalign">
                    <template>
                      <span class="wn1">状态</span>
                      <el-select
                        :clearable="flag"
                        v-model="search4"
                        class="claswithwn"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light textalign">
                    <template>
                      <span class="wn1">当前处理人</span>
                      <el-select
                        :clearable="flag"
                        v-model="search5"
                        class="claswithwn"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="40" type="flex" class="btnpr" justify="end">
                <el-col :span="6" class="btn2_c">
                  <el-button class="btn" type="success" size="medium " @click="storage">重置</el-button>
                  <el-button class="btn" type="primary" size="medium ">查询</el-button>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </div>
        <template>
          <el-table
            :data="tableData.filter(data => !search || Object.values(data).toString().toLowerCase().includes(search.toLowerCase()))"
            :border="true"
            height="330"
            class="tb-edit"
            style="width: 100%"
            @cell-click="cellclick"
            @selection-change="MultipleSelectionValue"
          >

            <!-- <el-table-column fixed align="center" type="selection" width="50"/>
            <el-table-column fixed type="index" width="50" label="序号" align="center"/> -->
            <el-table-column
              v-for="(item,index) in tableHead"
              :label="item.label"
              :property="item.property"
              :key="index"
              align="center"
            >
              <template slot-scope="scope" select="selecttest">
                <span>{{ dataToArr[scope.$index][index] }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" width="240" fixed="right" type="index">
              <template slot-scope="scope">
                <div v-if="oldTableData[scope.$index].state === '待审核'">
                  <el-button type="primary" size="mini">详情</el-button>
                  <el-button type="success" size="mini">通过</el-button>
                </div>
                <div v-else-if="oldTableData[scope.$index].state === '已通过'">
                  <el-button type="primary" size="mini">详情</el-button>
                  <el-button type="danger" size="mini">驳回</el-button>
                </div>
                <div v-else-if="oldTableData[scope.$index].state === '已驳回'">
                  <el-button type="primary" size="mini">详情</el-button>
                  <el-button type="success" size="mini">通过</el-button>
                </div>
              </template>
            </el-table-column> -->
          </el-table>
          <!-- <div class="block">
            <el-pagination
              :current-page.sync="currentPage"
              :page-size="100"
              :total="1000"
              layout="prev, pager, next, jumper"
            />
          </div> -->
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Gague from '../../components/gauge'
export default {
  name: 'ManageCockpt',
  components: {
    Gague
  },
  data() {
    return {
      selectVal: '',
      selctOptions: [{
        value: '0',
        label: '证监会1号文'
      }, {
        value: '1',
        label: '证监会2号文'
      }, {
        value: '2',
        label: '证监会3号文'
      }, {
        value: '3',
        label: '证监会4号文'
      }],
      formInline: {
        startDate: '',
        endDate: ''
      },

      gaugedata_submit: {
        maxnum: 10,
        target_num: 4,
        title: '报送情况',
        series_data: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%' }
            // data: [{ value: 50, name: '完成率' }]
          }
        ]
      },
      gaugedata_person: {
        maxnum: 10,
        target_num: 4,
        title: '人员情况',
        series_data: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%' }
            // data: [{ value: 50, name: '完成率' }]
          }
        ]
      },
      percentageVal: 100,
      currentPage: 0,
      showText: false,
      options: [
        {
          value: '待审核',
          label: '待审核'
        },
        {
          value: '已通过',
          label: '已通过',
          disabled: true
        }
      ],
      options2: [
        {
          value: '证券公司',
          label: '证券公司'
        },
        {
          value: '金融公司',
          label: '金融公司',
          disabled: true
        }
      ],
      value2: '',
      search: '',
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      search5: '',
      tableHead: [
        {
          prop: 'name',
          label: '业务日期区间',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '报表类型',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '报表编号',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '报表名称',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报表状态',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '产品品种',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报送频次',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '当前处理人',
          align: 'left',
          width: 10
        }

      ],
      oldTableData: [],
      tableData: [],
      // 数据值
      dataToArr: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1003',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1004',
          state: '已通过',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1005',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '息表',
          number: 'A10010',
          state: '待审核',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        }
      ],
      flag: true,
      status: []
    }
  },
  mounted() {
    this.drawLine('total_submit', '55%')
    this.drawLine('total_person', '0%')
    this.drawPie('submit_01', '#19C2C0', 60, 5)
    this.drawPie('submit_02', '#2DC25D', 90, 25)
    this.drawPie('submit_03', '#F05960', 60, 35)
    this.drawPie('submit_04', '#FABD16', 60, 45)
    this.drawPie('person_01', '#19C2C0', 60, 55)
    this.drawPie('person_02', '#2DC25D', 60, 25)
    this.drawPie('person_03', '#F05960', 60, 35)
    this.drawPie('person_04', '#FABD16', 60, 45)
    this.tableData = this.dataToArr
    this.oldTableData = this.dataToArr
    const tableList = this.tableData
    const arr = []
    for (var i = 0; i < tableList.length; i++) {
      arr[i] = []
    }
    for (const i in tableList) {
      for (const b in tableList[i]) {
        arr[i].push(tableList[i][b])
      }
    }
    this.dataToArr = arr
  },
  created() {
    for (var i in this.dataToArr) {
      for (var b in this.dataToArr[i]) {
        if (this.dataToArr[0][b] === '待审核') {
          this.status.push(0)
        } else if (this.dataToArr[0][b] === '已通过') {
          this.status.push(1)
        } else if (this.dataToArr[0][b] === '已驳回') {
          this.status.push(2)
        }
      }
    }
  },
  methods: {
    getSelectVal() {
      console.log(this.selectVal)
    },
    cellclick(row, column, cell, event) {
      // console.log(row) // 当前行数据
      // console.log(column)
      // console.log(cell) // 当前target
      // console.log(event)
    },
    // 多选的值
    MultipleSelectionValue(e) {},
    drawPie(id, color, other, count) {
      let other_01 = 0
      let cnt = 0
      const chartPie = this.$echarts.init(document.getElementById(id))

      chartPie.setOption({
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: [color, '#ebebeb'],
        legend: {
          show: false,
          orient: 'vertical',
          x: 'left',
          data: ['count', 'other']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            hoveranination: false,
            silent: true,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: function(obj) {
                  let sum = 0
                  if (obj.name === 'other') {
                    other_01 = obj.value
                  }
                  if (obj.name === 'count') {
                    cnt = obj.value
                  }
                  sum = parseInt(other_01) + parseInt(cnt)
                  var html = cnt + '/' + sum
                  return html
                },
                textStyle: {
                  fontSize: 18,
                  color: '#636B7F'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [

              { value: count, name: 'count' },
              { value: other, name: 'other' }
            ]
            // data: [
            //   { value: 30, name: 'count' },
            //   { value: 12, name: 'count1' }
            // ]
          }
        ]
      })
    },
    drawLine(id, percent) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById(id))
      // 绘制图表
      myChart.setOption({
        // color: [' #6B8EEA', '#F5768B', '#FCBB58'],
        color: [' #1a90fe', '#fabd15', '#f05960'],
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        tooltip: {
          enterable: true,
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(
            params // 数据格式
          ) {
            var relVal = params[0].name + '<br/>'
            relVal += params[0].seriesName + ' : ' + params[0].value + '<br/>'
            relVal += params[1].seriesName + ' : ' + params[1].value + '<br/>'
            relVal += params[2].seriesName + ' : ' + params[2].value + '%'
            return relVal
          }
        },

        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'top'
        },
        // graphic: {
        //   type: 'text',
        //   left: 'center',
        //   top: 'center',
        //   style: {
        //     text: 'Part1\n   财务规划，绩效和控制\n  Financial Reporting ,\nPlanning,Performance\n and Control',
        //     textAlign: 'center',
        //     fill: '#000',
        //     width: 30,
        //     height: 30
        //   }
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: [percent, '80%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: function() {
                  return '111'
                }
              },
              emphasis: {
                show: true,
                formatter: function(data) {
                  return data.value
                },
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '央行' },
              { value: 310, name: '证监会' },
              { value: 234, name: '银保监会' }
            ]
          }
        ]
      })
    },

    serchChange(e) {
      this.search = e
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    onSubmit() {
      console.log(this.formInline)
      if (this.formInline.startDate === '' || this.formInline.startDate === null) {
        // 没有选择开始日期
        alert('请选择查询起始日期')
      } else if (this.formInline.endDate === '' || this.formInline.endDate === null) {
        // 没有选择结束日期
        alert('请选择查询结束日期')
      }
    },
    storage() {
      this.dataToArr = this.oldTableData
      console.log(this.dataToArr)
      this.search = ''
      this.search1 = ''
      this.flag = true
      this.search2 = null
      this.search3 = null
      this.search4 = null
      this.search5 = null
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '../../assets/common';

.submit_situation {
  width: 817px;
  height: 180px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  background-image: url('../../assets/bg_process.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.word_btm {
  text-align: center;
  color: #2D2D2D;
}

.title {
  width: 100%;
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}

.audit_first {
  padding: 20px 0;
}

.audit_first_span {
  font-size: 14px;
  padding-right: 20px;
  color: $colorbluedark;
}

.claswithwn {
  width: 50%;
  margin-top: 20px;
}

.el-pagination {
  margin: 20px 0;
}

.btn {
  height: 100%;
  display: inline-block;
}

.btnpr {
  padding-right: 40px;
}

.wn1 {
  padding-right: 20px;
}

.btn2_c {
  text-align: center;
  margin-top: 20px;
}

div.gjsx {
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
}

.displayib {
  display: inline-block;
  width: 100%;
}

.bgg {
  background: #fbfbfb;
  padding: 10px 0;
  margin-top: 10px;
}

.rotate {
  transform-origin: center center; // 旋转中心要是正中间 才行
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: transform 0.2s; // 过度时间 可调
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.rotate1 {
  transform-origin: center center;
  transform: rotate(0deg); // 返回原点
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.baobiao_tab {
  height: 300px;

  .progress-item {
    padding-top: 20px;
  }
}

.baobiao_tab1 {
  height: 373px;
}

div.el-progress-bar__outer {
  height: 14px !important;
}

.circle {
  margin: 0 auto;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 5px $colorbluedark;
  position: relative;
}

.circle_son {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: $colorbluedark;
  border-radius: 50%;
}

span>.circle_span {
  line-height: 50px;
}

.bbsc {
  margin: 0 auto;
  width: 80px;
  margin-top: 50px;

  p {
    text-align: center;
    line-height: 20px;
  }
}

.margint40 {
  margin-top: 40px;
}

.wunai {
}
</style>
